<template>
  <SLayout>
    <!--    <SearchForm ref="searchRef" @search="flushedTable" />-->
    <SLayoutContent>
      <n-card>
        <Toolbar ref="toolRef" @getDataList="()=>tableRef?.getList()"/>
        <SDataTable
            ref="tableRef"
            type="page"
            :columns="columns"
            @getData="getData"
            option
            :optionTypes="['delete']"
            :delete-click="deleteClick"
            :disabled-delete="disabledDelete"
        />
      </n-card>
      <!--      <Drawer v-model:drawerShow="drawerShow" :selected="selected"/>-->
    </SLayoutContent>
  </SLayout>
</template>
<script setup>
import SLayout from "@/components/ExtLayout/SLayout.vue";
import SDataTable from "@/components/public/SDataTable.vue";
import SLayoutContent from "@/components/ExtLayout/SLayoutContent.vue";
import {deleteComment, queryComment, queryMusicList} from "@/api/music/musicApi";
import Toolbar from "./toolbar/Toolbar.vue";

const tableRef =ref();
const toolRef =ref();


// function updateClick(row){
//   toolRef.value?.openEdit(row,row.id)
// }
function deleteClick(item){
  deleteComment(item.id).then(res=>{
    tableRef.value?.getList()
  })
}
function disabledDelete(row){
  return false
}
function getData(callback,page,pageSize){

  queryComment(page,pageSize).then(res=>{
    callback(res.data || {})
  })

}

const columns = [

  {
    title: '评论歌曲',
    key: 'music',
    width:100,
    render(row){
      return row.musicVo?.musicName + ' - ' + row.musicVo?.singerVo?.name
    }
  },
  {
    title: '评论用户',
    key: 'user',
    width:100,
    render(row){
      return row.userVo?.name
    }
  },
  {
    title: '内容',
    key: 'content',
    width:300,
  },
]

</script>